<template>
  <div class="o-input-number-range">
    <w-input
      v-model="value[0]"
      @on-change="onChange($event, 0)"
      @on-blur="onBlur"
      @on-focus="onFocus"
      ref="input"
      :align="align"
      :disabled="renderOpts.props.disabled"
    ></w-input>
    <span>-</span>
    <w-input
      v-model="value[1]"
      @on-change="onChange($event, 1)"
      @on-blur="onBlur"
      @on-focus="onFocus"
      :align="align"
      :disabled="renderOpts.props.disabled"
    ></w-input>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
import { Tsrv } from '@/services';
import wInput from './input.vue';

@Component({
  components: {
    wInput
  }
})
export default class oNumberInputRange extends Vue {
  /**
   * props
   */
  @Prop() renderOpts: any;

  @Prop() params: any;

  private value = [null, null];

  private align = 'left';

  /**
   * data
   */
  @Watch('params')
  onParamsChange() {
    this.initProps();
    this.setValue();
  }

  mounted() {
    this.initProps();
    this.setValue();
  }

  private initProps() {
    if (this.params.property) {
      const items = this.params.$form.items;
      const find = Tsrv.utils.find(
        items,
        el => el.field === this.params.property
      );
      if (find) {
        this.align = find.align || 'left';
      }
    } else {
      this.align = this.params.column.align || 'left';
    }
  }

  public focus() {
    (this.$refs.input as wInput).focus();
  }

  resetValue() {
    this.setValue(null);
    this.setTableValue(null);
  }

  setValue(val: null[] | string[] | undefined = undefined) {
    let value = [null, null];
    if (val !== null) {
      if (this.params.property) {
        const data = this.params.data[this.params.property];
        if (data !== undefined && data !== null) value = data;
      } else {
        const data = this.params.row[this.params.column.property];
        if (data !== undefined && data !== null) value = data;
      }
    }
    this.value = value;
  }

  setTableValue(val: string[] | null) {
    const numberArr: number[] | null[] =
      val === null
        ? [null, null]
        : [
            val[0] === null ? null : Tsrv.utils.toNumber(val[0]),
            val[1] === null ? null : Tsrv.utils.toNumber(val[1])
          ];
    if (this.params.property) {
      this.params.data[this.params.property] = numberArr;
    } else {
      this.params.row[this.params.column.property] = numberArr;
    }
  }

  onBlur() {
    this.emitEvent('blur');
  }

  onFocus() {
    this.emitEvent('focus');
  }

  onChange(val, index) {
    const value = this.value;
    value[index] = val;
    this.setTableValue(value);
    this.emitEvent('change');
  }

  emitEvent(event: string) {
    const ev = this.renderOpts.events;
    // 深拷贝有问题
    // const params = Tsrv.utils.clone(this.params);
    const params = Tsrv.utils.cloneNoMatchVue(this.params, true);

    params.from = 'inputnumberrange';
    for (const action in ev) {
      if (ev[action] && action === `on-${event}`) {
        ev[action](params);
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.o-input-number-range {
  .ivu-dropdown {
    width: calc(50% - 15px);
  }
  > span {
    display: inline-block;
    width: 30px;
    height: 100%;
    text-align: center;
  }
}
</style>
